Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat: add PreviewImage touchZoom #279

Closed
wants to merge 14 commits into from
Closed

feat: add PreviewImage touchZoom #279

wants to merge 14 commits into from

Conversation

wanpan11
Copy link
Contributor

@wanpan11 wanpan11 commented Sep 14, 2023 •
edited by yoyo837
Loading

贡献新功能

PreviewImage 添加移动端 虎口缩放功能😁😁😁😁

close ant-design/ant-design#44529

@vercel
Copy link

vercel bot commented Sep 14, 2023 •
edited
Loading

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
image ✅ Ready (Inspect) Visit Preview 💬 Add feedback Sep 25, 2023 3:55am

@wanpan11 wanpan11 mentioned this pull request Sep 14, 2023
Closed
@yoyo837
Copy link
Member

yoyo837 commented Sep 18, 2023

放大到一定尺寸后横向或纵向滚动后再用手势放大OK吗? 另外放大应该需要一个最大倍数吧

@codecov
Copy link

codecov bot commented Sep 18, 2023 •
edited
Loading

Codecov Report

Merging #279 (9d50449) into master (cbf9d8a) will decrease coverage by 13.11%.
Report is 4 commits behind head on master.
The diff coverage is 40.54%.

❗ Current head 9d50449 differs from pull request most recent head 518b6ec. Consider uploading reports for the commit 518b6ec to get more accurate results

@@             Coverage Diff             @@
##           master     #279       +/-   ##
===========================================
- Coverage   97.90%   84.80%   -13.11%     
===========================================
  Files          13       14        +1     
  Lines         382      487      +105     
  Branches      108      138       +30     
===========================================
+ Hits          374      413       +39     
- Misses          7       70       +63     
- Partials        1        4        +3
Files Coverage Δ
src/hooks/useImageTransform.ts 98.00% <100.00%> (ø)
src/hooks/useStatus.ts 96.00% <100.00%> (+0.16%) ⬆️
src/Preview.tsx 99.23% <87.50%> (-0.77%) ⬇️
src/hooks/useTouchZoom.ts 32.98% <32.98%> (ø)

📣 We’re building smart automated test selection to slash your CI/CD build times. Learn more

@wanpan11
Copy link
Contributor Author

放大到一定尺寸后横向或纵向滚动后再用手势放大OK吗? 另外放大应该需要一个最大倍数吧

放大到一定尺寸后 是指图片溢出后 手势缩放能不能正常工作吗

是的可以加个最大倍数，我试了下别的APP有的好像能放很大，所以不知道定多少合适 2倍可以吗

@yoyo837
Copy link
Member

yoyo837 commented Sep 18, 2023

倍数这个, 等巨佬来指导吧, 溢出这个, 只要你双指缩放时都是以指头之间的中心为准就可以

@wanpan11
Copy link
Contributor Author

倍数这个, 等巨佬来指导吧, 溢出这个, 只要你双指缩放时都是以指头之间的中心为准就可以

好的 感谢大佬

@yoyo837
Copy link
Member

yoyo837 commented Sep 18, 2023

这个好加测试用例吗?

@wanpan11
Copy link
Contributor Author

这个好加测试用例吗?

测试这块我研究下 平时用的不多=、=

zombieJ
zombieJ reviewed Sep 18, 2023
View reviewed changes
src/Preview.tsx Outdated Show resolved Hide resolved
JarvisArt
JarvisArt reviewed Sep 18, 2023
View reviewed changes
src/Preview.tsx Outdated Show resolved Hide resolved
@wanpan11
Copy link
Contributor Author

好滴 我试试🔋

@JarvisArt
Copy link
Contributor

放大到一定尺寸后横向或纵向滚动后再用手势放大OK吗? 另外放大应该需要一个最大倍数吧

放大到一定尺寸后 是指图片溢出后 手势缩放能不能正常工作吗

是的可以加个最大倍数，我试了下别的APP有的好像能放很大，所以不知道定多少合适 2倍可以吗

最大倍数与最小倍数可以配置的，maxScale / minScale，默认是 50 / 1

@wanpan11
Copy link
Contributor Author

改好了 大佬们再看看 测试那块我再研究下🔋

@JarvisArt
Copy link
Contributor

拖动的时候可以阻止下浏览器的默认行为。
体验了下，感觉不太流畅~，不知道是不是受动画的影响，上下移动的时候不准。
可以多体验体验 ant-mobile 的图片预览： https://mobile.ant.design/zh/components/image-viewer

@wanpan11
Copy link
Contributor Author

拖动的时候可以阻止下浏览器的默认行为。 体验了下，感觉不太流畅~，不知道是不是受动画的影响，上下移动的时候不准。 可以多体验体验 ant-mobile 的图片预览： https://mobile.ant.design/zh/components/image-viewer

好滴

@wanpan11
Copy link
Contributor Author

wanpan11 commented Sep 20, 2023 •
edited
Loading

优化了下 大佬们空了看下 🚀

  • 预览模式下 禁止了移动端的缩放行为
  • 图片溢出后 拖拽结束自动靠边

@JarvisArt
Copy link
Contributor

image
预览图片，页面会被挤压到左侧

@wanpan11
Copy link
Contributor Author

image 预览图片，页面会被挤压到左侧

修复了😂 辛苦大佬

@JarvisArt
Copy link
Contributor

图片放大之后就拉不上去了
image

@wanpan11
Copy link
Contributor Author

图片放大之后就拉不上去了 image

改好了 应该可以了😂

@zombieJ
Copy link
Member

zombieJ commented Sep 22, 2023

这个阻尼感有点重

@wanpan11
Copy link
Contributor Author

现在 touchmove 的逻辑是 图片的长宽 那边没有超出屏幕就会在 touchend 的时候回到屏幕居中的位置
禁止移动端拖拽的方案也改了下
大佬们再看下

@wanpan11
Copy link
Contributor Author

这个阻尼感有点重

这个阻尼是指那块呢 我刚刚吧 transitionDuration 改小了一点

@JarvisArt
Copy link
Contributor

这个阻尼感有点重

这个阻尼是指那块呢 我刚刚吧 transitionDuration 改小了一点

是不是缩放着缩放着，手指明明操作图片缩小一半的大小，结果图片只是缩小了一点点，多操作就会这个bug；
有时候缩放还是会放大页面。

机型：iphone手机

@wanpan11
Copy link
Contributor Author

这个阻尼感有点重

这个阻尼是指那块呢 我刚刚吧 transitionDuration 改小了一点

是不是缩放着缩放着，手指明明操作图片缩小一半的大小，结果图片只是缩小了一点点，多操作就会这个bug； 有时候缩放还是会放大页面。

机型：iphone手机

页面放大这版应该不会了

@wanpan11
Copy link
Contributor Author

优化了下 大佬再试试看😁

@JarvisArt
Copy link
Contributor

@wanpan11 在这的基础上完善了一些功能，可以看看~ #286

@wanpan11
Copy link
Contributor Author

wanpan11 commented Nov 3, 2023 •
edited
Loading

@wanpan11 在这的基础上完善了一些功能，可以看看~ #286

好滴 学习下🤠

@wanpan11 wanpan11 closed this Nov 28, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@JarvisArt JarvisArt JarvisArt left review comments

@yoyo837 yoyo837 yoyo837 left review comments

@zombieJ zombieJ zombieJ left review comments

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

Image 组件的在手机端预览时能否添加手势的放大缩小
4 participants
@wanpan11 @yoyo837 @JarvisArt @zombieJ